<template>
	<view class="content">
		<view class="messageC" :class="showLoading?'hidePage':''">
			<z-paging ref="paging" @query="queryList"  fixed>
				<!-- 消息列表 -->
				<view class="message-list">
					<block v-for="(item, index) in messageList" :key="index">
						<view class="message-itm" v-if="item.message_type == 1">
							<view class="message-time font22">
								<text>{{item.created_at}}</text>
							</view>
							<!-- 打卡通知 -->
							<view class="message-cont flex-top">
								<view class="cont-left msg-blue">
									<view class="cont-ico">
										<image src="../../static/img/msg_ico1.png" mode="widthFix"></image>
									</view>
									<view class="cont-text1 font20">
										打卡
									</view>
								</view>
								<view class="cont-right boxS">
									<view class="cont-text2 font26">
										{{item.is_today == 1?'打卡通知':'考勤打卡'}}
									</view>
									<view class="cont-text3 font26">
										{{item.is_today == 1?'还有10分钟就要上班了，别忘记打卡哦~':'已为你自动生成今日考勤结果'}}
									</view>
									<!-- 操作按钮 -->
									<view class="message-btn" @click="urllink('clcok',index)">
										{{item.is_today == 1?'立即打卡':'查看详情'}}
									</view>
								</view>
							</view>
						</view>
						<view class="message-itm" v-if="item.message_type == 6">
							<view class="message-time font22">
								<text>{{item.created_at}}</text>
							</view>
							<!-- 打卡通知 -->
							<view class="message-cont flex-top">
								<view class="cont-left msg-blue">
									<view class="cont-ico">
										<image src="../../static/img/msg_ico1.png" mode="widthFix"></image>
									</view>
									<view class="cont-text1 font20">
										打卡
									</view>
								</view>
								<view class="cont-right boxS">
									<view class="cont-text2 font26">
										{{item.is_today == 1?'打卡通知':'考勤打卡'}}
									</view>
									<view class="cont-text3 font26">
										{{item.is_today == 1?'还有10分钟就要下班了，别忘记打卡哦~':'已为你自动生成今日考勤结果'}}
									</view>
									<!-- 操作按钮 -->
									<view class="message-btn" @click="urllink('clcok',index)">
										{{item.is_today == 1?'立即打卡':'查看详情'}}
									</view>
								</view>
							</view>
						</view>
						<!-- 公告 -->
						<view class="message-itm" v-if="item.message_type == 2">
							<view class="message-time font22">
								{{item.created_at}}
							</view>
							<view class="message-cont flex-top">
								<view class="cont-left msg-blue1">
									<view class="cont-ico">
										<image src="../../static/img/msg_ico4.png" mode="widthFix"></image>
									</view>
									<view class="cont-text1 font20">
										公告
									</view>
								</view>
								<view class="cont-right">
									<view class="cont-text2 font26">
										{{item.title}}
									</view>
									<view class="cont-text3 font26">
										<image :src="item.other.cover" mode="widthFix"></image>
									</view>
									<!-- 操作按钮 -->
									<view class="message-btn" @click="urllink('gonggao',item.relation_id)">
										查看详情
									</view>
								</view>
							</view>
							
						</view>
						<!-- 审批通知 -->
						<view class="message-itm boxS" v-if="item.message_type == 3">
							<view class="message-time font22">
								{{item.created_at}}
							</view>
							<view class="message-cont flex-top">
								<view class="cont-left msg-orange">
									<view class="cont-ico">
										<image src="../../static/img/msg_ico2.png" mode="widthFix"></image>
									</view>
									<view class="cont-text1 font20">
										审批
									</view>
								</view>
								<view class="cont-right">
									<view class="cont-text2 font26">
										审批结果
									</view>
									<view class="cont-text3 font26">
										您与
										<text>{{item.timer}}</text>
										提交的
										<text>{{item.title}}
											</text>申请<text>
										{{item.other.audit_info?item.other.audit_info.user_name:'未知'}}-{{item.other.audit_info?item.other.audit_info.rank_name:'未知'}}
										</text>
										<text>{{item.other.approve.status==1?'已同意':'已拒绝'}}</text>。
									</view>
									<!-- 操作按钮 -->
									<view class="message-btn" @click="urllink('approve',item.relation_id)">
										查看详情
									</view>
								</view>
							</view>
						</view>
						<!-- 考勤 -->
						<view class="message-itm" v-if="item.message_type == 4">
							<view class="message-time font22">
								{{item.created_at}}
							</view>
							<view class="message-cont flex-top">
								<view class="cont-left msg-green">
									<view class="cont-ico">
										<image src="../../static/img/msg_ico3.png" mode="widthFix"></image>
									</view>
									<view class="cont-text1 font20">
										考勤
									</view>
								</view>
								<view class="cont-right">
									<view class="cont-text2 font26">
										上周考勤通知
									</view>
									<view class="cont-text3 font26">
										您与2021年09月02日-2021年09月03日中迟到0次，早退0次，缺卡1次，请知晓.
									</view>
									<!-- 操作按钮 -->
									<view class="message-btn">
										查看详情
									</view>
								</view>
							</view>
							
						</view>
						<!-- 审批通知 -->
						<view class="message-itm boxS" v-if="item.message_type == 5">
							<view class="message-time font22">
								{{item.created_at}}
							</view>
							<view class="message-cont flex-top">
								<view class="cont-left msg-orange">
									<view class="cont-ico">
										<image src="../../static/img/msg_ico2.png" mode="widthFix"></image>
									</view>
									<view class="cont-text1 font20">
										审批
									</view>
								</view>
								<view class="cont-right">
									<view class="cont-text2 font26">
										审批通知
									</view>
									<view class="cont-text3 font26">
										<text>{{item.other.user_info.user_name}} </text>与<text> {{item.timer}} </text>提交的<text>{{item.title}}</text>申请,需要您的审批。
									</view>
									<!-- 操作按钮 -->
									<view class="message-btn" @click="urllink('approve',item.relation_id)">
										去审批
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</z-paging>
		</view>
			
		<lzLoading :showloading='showLoading'></lzLoading>
	
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				messageList:[], //消息列表
			}
		},
		onLoad() {
		
		},
		onShow(){
			Promise.all([this.getMessages()]).then((t) => {
				let sett = setTimeout(()=>{
					this.showLoading = false
				},1000)
			})
		},
		methods: {
			queryList(pageNo, pageSize) {
				console.log(pageNo)
				let sett = setTimeout(()=>{
					Promise.all([this.getMessages(pageNo,pageSize)]).then((t) => {
						
					})
				},1000)
			},
			//获取消息列表
			getMessages(pageNo,pageSize){
				return new Promise((resolve, reject) => {
					this.$api.getMessages({
						page: pageNo,
						pageSize: pageSize
					}, true, (res) => {
						for(let i in res.list)
						{
							res.list[i].timer = this.$util.formatTime(res.list[i].created_at,'M月D日 h时m分')
						}
						this.messageList = res.list
						this.$refs.paging.complete(res.list)
						resolve("success")
					})
				})
			},
			//页面跳转
			urllink(url,ids){
				//跳转到公告
				if(url == 'gonggao')
				{
					uni.navigateTo({
						url:"./detail?id="+ids
					})
				}
				//跳转到审批
				if(url == 'approve')
				{
					uni.navigateTo({
						url:"../approve/detail?id="+ids
					})
				}
				//考勤打卡/查看详情
				if(url == 'clcok')
				{
					let obj = this.messageList[ids]
					console.log(ids)
					if(obj.is_today == 1)
					{
						uni.navigateTo({
							url:"../clock/index"
						})
					}else
					{
						uni.navigateTo({
							url:"../statistics/index?day="+obj.created_at
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page
	{
		background: #fafafa;
		.messageC
		{
			letter-spacing: 1rpx;
			transition: all .3s;
			.message-list
			{
				width: 100%;
				padding-bottom: 1rpx;
				.message-itm
				{
					padding: 0 4%;
					margin-bottom: 50rpx;
					.message-time
					{
						margin: 30rpx auto;
						text-align: center;
						text
						{
							background: #fff;
							color: #ABABAB;
							text-align: center;
							padding: 2rpx 15rpx;
							border-radius: 15rpx;
						}
					}
					.message-cont
					{
						
						.cont-left
						{
							margin-right: 40rpx;
							padding: 10rpx 25rpx;
							color: #fff;
							.cont-ico
							{
								image
								{
									width: 40rpx;
									height: 40rpx;
								}
							}
						}
						.cont-right
						{
							width: 450rpx;
							background: #fff;
							border-radius: 15rpx;
							.cont-text2
							{
								color: #454545;
								padding: 0 30rpx;
								padding-top: 15rpx;
							}
							.cont-text3
							{
								color: #787878;
								line-height: 35rpx;
								margin-top: 20rpx;
								padding: 0 30rpx;
								text
								{
									color: #FF9600;
								}
								image
								{
									width: 100%;
								}
							}
						}
					}
				}
			}
			.message-btn
			{
				color: #008AFF;
				text-align: center;
				margin-top: 30rpx;
				padding: 20rpx 0;
				border-top: 1rpx solid #E6E6E6;
			}
		}
		.msg-blue
		{
			background: linear-gradient(45deg, #00A2FF 0%, #008AFF 100%);
			border-radius: 7rpx;
		}
		.msg-orange
		{
			background: linear-gradient(45deg, #FF9600 0%, #FF7E00 100%);
			border-radius: 7rpx;
		}
		.msg-green
		{
			background: linear-gradient(45deg, #35D618 0%, #2EBC15 100%);
			border-radius: 7rpx;
		}
		.msg-blue1
		{
			background: linear-gradient(45deg, #00D2FF 0%, #00AEFF 100%);
			border-radius: 7rpx;
		}
	}
</style>
